<!--
 * @Description: 我的tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: hbd
 * @LastEditTime: 2022-01-05 20:41:37
-->
<template>
  <div class="user">
    <div class="header">
      <div class="photo">
        <van-uploader
          multiple
          :max-count="1"
          result-type="file"
          :after-read="afterRead"
        >
          <!-- 默认头像 -->
          <van-image round width="10rem" height="10rem" :src="info.user_face" />
          <!-- <img :src="info.user_face" style="c" /> -->
        </van-uploader>
      </div>
      <!-- {{ info }} -->
      <!-- <div class="name">{{ info.name }}</div> -->
    </div>
    <!-- <van-cell title="所有订单" is-link to="/manager/order" /> -->
    <div class="ul_info">
      <ul>
        <li>
          账号<i>{{ info.username }}</i>
        </li>
        <li>
          姓名<i>{{ info.realname }}</i>
        </li>
        <li>
          性别<i v-if="info.gender == 'male'">男</i>
          <i v-else>女</i>
        </li>
        <li>
          生日<i>{{ info.birth | dayfmt }}</i>
        </li>
        <li>
          电话<i>{{ info.telephone }}</i>
        </li>
      </ul>
    </div>
    <div class="btn" @click="logoutHandler">退出</div>
  </div>
</template>

<script>
import { get } from "@/utils/request.js";
import { mapState, mapActions } from "vuex";
import { Toast } from "vant";
import axios from "axios";
import { patch } from "../../utils/request.js";
export default {
  data() {
    return {
      obj: {
        zhanghao: "",
        name: "",
        gender: "",
        birth: "",
        tel: "",
      },
      resData: {},
    };
  },
  methods: {
    ...mapActions("user", ["logout", "getInfo"]),
    logoutHandler() {
      this.logout();
    },

    pageQueryuser() {
      get("/user/getInfo", this.params).then((res) => {
        // 将后台接口的响应结果，赋值给resData
        this.resData = res.data;
      });
    },
    // 上传图片
    afterRead(file) {
      console.log(file);
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios
        .post(url, params, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          console.log(response);
          // 更新用户头像
          file.status = "success";
          // 新头像地址
          let user_face =
            "http://121.199.29.84:8888/group1/" + response.data.data.id;
          let params = {
            id: this.info.id + "",
            user_face,
          };
          let url = "/user/updateUserFace";
          patch(url, params).then((resp) => {
            Toast.success(resp.message);
            // 刷新用户信息 - 状态机
            this.getInfo();
          });
        })
        .catch((error) => {
          file.status = "failed";
          file.message = "上传失败";
          Toast("图片上传失败:" + error + " 请返回重新上传");
        });
    },
  },
  computed: {
    ...mapState("user", ["info"]),
  },
};
</script>

<style scoped>
* {
  font-family: "等线";
}
.header {
  padding-top: 46px;
  text-align: center;
  background: #ebe1b2;
  margin-bottom: 2em;
}

.header .photo {
  position: relative;
  top: -20px;
  margin: 0 auto;
  width: 10em;
  height: 10em;
  border-radius: 70px;
  box-sizing: border-box;
  border: 2px solid #ebe1b2;
  overflow: hidden;
  text-align: center;
  /* text-align: center; */
  /* padding: 1em; */
}
.header .name {
  line-height: 3em;
  font-size: 16px;
  color: #ffffff;
}
.header .photo img {
  width: 100%;
  height: 100%;
}

.btn {
  width: 75%;
  margin: 1em auto;
  line-height: 2.5em;
  text-align: center;
  border: 1px solid #ededed;
  border-radius: 1.5em;
  font-size: 18px;
  background-color: #f5a31f;
}
.ul_info ul {
  margin: 0 auto;
}
.ul_info li {
  margin: 0 auto;
  padding: 5px;
  width: 90%;
  height: 25px;
  line-height: 25px;
  margin-top: 10px;
  font-size: 16px;
  color: #122247;
  border-bottom: 2px solid #ededed;
}
.ul_info li i {
  color: gray;
  float: right;
}
</style>
